<template>
    <div>
        <el-container>
            <el-header>
                <div class="title_box">
                    星巴克后台管理
                </div>
                <div class="logOut_box">
                    <el-button @click="logOutBtn">退出</el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <menus></menus>
                </el-aside>
                <el-main><router-view></router-view></el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { mapActions } from 'vuex';
import menus from './components/menus.vue';
export default {
    components: { menus },
    name: 'MyAppIndex',

    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {
        ...mapActions('login', ['logOutActions']),
        logOutBtn() {
            this.logOutActions()
            this.$router.push('/')
            this.$message.success('退出登录成功')
        }
    },
};
</script>

<style lang="scss" scoped>
.el-container {
    width: 100vw;
    height: 100vh;
}

.el-header {
    background-color: #fdfdfd;
    color: #333;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title_box {
        font-size: 20px;
    }
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
}
</style>